<script setup>
  const props = defineProps({
    data: {
      default: []
    }
  })
</script>

<template>
  <div>
    <div class="meeting-process" v-for="d, i in data" :key="i">
      <span class="time"> {{d.time}} </span>
      <div class="space-y-2 content">
        <h5 class="font-medium">{{d.title}}</h5>
        <div v-for="c, k in d.content" :key="k" class="text-sm text-slate-500" v-html="c"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .meeting-process {
    @apply flex gap-2;

    &:not(:last-child) {
      .content {
        &::after {
          @apply w-0.5 bg-indigo-300 top-10 -bottom-5 left-[-23px];
        }
      }
    }

    .time {
      @apply text-indigo-500 py-5 shrink-0 w-[120px] md:w-[200px] pr-2 md:pr-4;
    }

    .content {
      @apply flex-1 relative ml-4 py-5;

      &::before,
      &::after {
        content: '';
        @apply absolute left-[-28px];
      }

      &::before {
        @apply w-3 h-3 bg-indigo-300 rounded-full top-6 ring-2 ring-indigo-400;
      }
    }
  }
</style>